<template>
  <div class="box">{{ 1 + 1 }} : {{ a }} + {{ b }} = {{ c }}</div>
  <el-upload :before-upload="onUpload1" :multiple="true">
    <el-button>上传压缩文件</el-button>
  </el-upload>
  <el-button @click="zip">保存zip</el-button>
  <div v-for="(item, index) in files" :key="index">
    <img :src="item" alt="" style="max-width:300px" />
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import { ref, computed, markRaw } from 'vue'
import JSZip from 'jszip'
import saveAs from '@/libs/FileSaver.js'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      files: []
    }
  },
  computed: {
    c() {
      return this.a + this.b
    }
  },
  methods: {
    onUpload1(file) {
      this.upload(file).then((res) => {
        this.unzip(res)
      })
      return false
    },
    unzip(res) {
      var zip = new JSZip()
      let [type, base64] = res.split(',')
      zip
        .loadAsync(base64, {
          base64: true
        })
        .then((res) => {
          console.log(res)
          this.readFile(res.files)
        })
    },
    readFile(files) {
      for (var p in files) {
        let file = files[p]
        if (!file.dir) {
          file.async('base64').then((res) => {
            this.files.push('data:image/png;base64,' + res)
          })
        }
      }
    },
    upload(file) {
      return new Promise((resolve) => {
        let fr = new FileReader()
        fr.onload = (e) => {
          let result = e.target.result
          resolve(result)
        }
        fr.readAsDataURL(file)
      })
    },
    zip() {
      var zip = new JSZip()
      zip.file('Hello.txt', 'Hello World\n')
      zip.generateAsync({ type: 'blob' }).then(function(content) {
        // see FileSaver.js
        saveAs(content, 'example.zip')
      })
    },
    add() {}
  },
  mounted() {}
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
